<template>
    <div class="container-fluid padding10-0">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="fa fa-hdd-o"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">CPU Traffic</span>
                        <span class="info-box-number">90<small>%</small></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Likes</span>
                        <span class="info-box-number">41,410</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->

            <!-- fix for small devices only -->
            <div class="clearfix visible-sm-block"></div>

            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-slideshare"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">Sales</span>
                        <span class="info-box-number">760</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-purple"><i class="fa fa-medium"></i></span>

                    <div class="info-box-content">
                        <span class="info-box-text">New Members</span>
                        <span class="info-box-number">2,000</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
        </div>
        <div class="row" style="padding-top:10px;">
            <div class="col-md-8 col-sm-8 col-xs-12">
                <Histogram :data="dataSourse" title="省市分布情况" align="left"></Histogram>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <List :shadow="shadow" title="门店销售排行榜" :data="dataList" ranking="3"></List>
            </div>
        </div>
         <div class="row" style="padding-top:10px;">
            <div class="col-md-3 col-sm-3 col-xs-3">
                <AreaChart height="140px"></AreaChart>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
              <AreaChart height="140px"></AreaChart>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                 <AreaChart height="140px"></AreaChart>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                 <AreaChart height="140px"></AreaChart>
            </div>

        </div>
    </div>
</template>
<script>
    import Histogram from "@/components/Histogram"
    import AreaChart from "@/components/AreaChart"
    import List from "@/components/List"
    export default {
        data() {
            return {
                shadow:true,
                dataSourse: {
                    x: ['甘肃', '青海', '内蒙古', '重庆', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '江西', '山东', '河南', '湖南', '湖北', '广东', '海南', '四川', '贵州', '云南'],
                    y: [45, 85, 65, 91, 53, 65, 83, 54, 26, 99, 12, 4, 77, 56, 88, 35, 94, 37, 61, 12, 56]

                },
                dataList: [
                    {
                        index: 1,
                        text: "白鹭岛 1号店",
                        num: "1234.56"
                    },
                    {
                        index: 2,
                        text: "白鹭岛 1号店",
                        num: "1234.56"
                    },
                    {
                        index: 3,
                        text: "白鹭岛 1号店",
                        num: "1234.56"
                    },
                    {
                        index: 4,
                        text: "白鹭岛 1号店",
                        num: "1234.56"
                    },
                    {
                        index: 5,
                        text: "白鹭岛 1号店",
                        num: "1234.56"
                    },
                    {
                        index: 6,
                        text: "白鹭岛 1号店",
                        num: "1234.56"
                    },
                    {
                        index: 7,
                        text: "白鹭岛 1号店",
                        num: "1234.56"
                    }
                ]
            }
        },
        components: {
            Histogram, List,AreaChart
        }
    };
</script>